{extend name="personcentor/information"}
{block name="head"}
{load href="/static/index/css/bootstrap.min.css"}
{/block}
{block name="jqjs"}
{/block}
{block name="main"}
        <!--插入图片的插件开始-->
		<script>
            //图片上传预览    IE是用了滤镜。
            function previewImage(file)
            {
                var MAXWIDTH  = 210;
                var MAXHEIGHT = 140;
                var div = document.getElementById('preview');
                if (file.files && file.files[0])
                {
                    div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
                    var img = document.getElementById('imghead');
                    img.onload = function(){
                        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                        img.width  =  rect.width;
                        img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                        img.style.marginTop = rect.top+'px';
                    }
                    var reader = new FileReader();
                    reader.onload = function(evt){img.src = evt.target.result;}
                    reader.readAsDataURL(file.files[0]);
                }
                else //兼容IE
                {
                    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                    file.select();
                    var src = document.selection.createRange().text;
                    div.innerHTML = '<img id=imghead>';
                    var img = document.getElementById('imghead');
                    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                    div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
                }
            }
            function clacImgZoomParam( maxWidth, maxHeight, width, height ){
                var param = {top:0, left:0, width:width, height:height};
                if( width>maxWidth || height>maxHeight ){
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;

                    if( rateWidth > rateHeight ){
                        param.width =  maxWidth;
                        param.height = Math.round(height / rateWidth);
                    }else{
                        param.width = Math.round(width / rateHeight);
                        param.height = maxHeight;
                    }
                }
                param.left = Math.round((maxWidth - param.width) / 2);
                param.top = Math.round((maxHeight - param.height) / 2);
                return param;
            }
		</script>
		{load href="/static/index/css/bootstrap.min.css"}
		{load href="/static/index/css/footer.css"}
		<link href="/static/index/business/css/admin.css" rel="stylesheet" type="text/css">
		<link href="/static/index/business/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="/static/index/business/css/personal.css" rel="stylesheet" type="text/css">
        <link href="/static/index/business/css/stepstyle.css" rel="stylesheet" type="text/css">

        <script src="/static/index/business/js/jquery.min.js"></script>
		<!--插入图片的插件结束-->

			<div class="col-main" >
				<div class="main-wrap">
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">实名认证</strong> / <small>Real&nbsp;authentication</small></div>
					</div>
					<hr/>
					<div class="authentication">
						<form method = "post" enctype="multipart/form-data" action="{:url('index/business/save')}">
						<p class="tip">请选择你的用户类型</p>
							&nbsp;&nbsp;&nbsp;<label>个人:<input class="personradio" type="radio" name="usertype" value="0" checked/></label>
						    <label>商家:<input class="businessradio" type="radio" name="usertype" value="1" /></label>

                         <!--个人联系信息，电话 开始-->

							<div class="authenticationInfo ">
								<p class="title">填写联系人信息</p>
								<div class="am-form-group" >
									<label  class="am-form-label">联系人姓名</label>
									<div class="am-form-content">
										<input type="hidden" name="user_id" value="{$result.id}"/>       <!--通过session获取-->
										<input type="text"  placeholder="请输入您姓名" name="link_name" id="linkname" >
										<span class="content"></span>
									</div>
								</div>
								<div class="am-form-group" >
									<label  class="am-form-label">联系电话</label>
									<div class="am-form-content">
										<input type="text" id="link_phone"  placeholder="请输入您的联系电话" name="link_phone" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" required="required">
									</div>
								</div>
							</div>

							<!--个人联系信息，电话 结束-->

						<!--个人信息资料开始-->
						<div class="personinformation">
						<div class="authenticationInfo ">
							<p class="title">填写身份证信息</p>
							<div class="am-form-group">
								<label for="user-name" class="am-form-label">姓名</label>
								<div class="am-form-content">
									<input type="text"  placeholder="请输入您的身份证姓名" name="name_company">

								</div>
							</div>
							<div class="am-form-group">
								<label for="user-IDcard" class="am-form-label">身份证号</label>
								<div class="am-form-content">
									<input type="text"  placeholder="请输入您的身份证信息" name="id_reg">
								</div>
							</div>
							<p class="title">上传身份证照片</p>
						</div>
						</div>
   						<!--个人信息资料结束-->

						<!--商家信息资料开始-->
						<div class="businessinformation" style="display:none">
						<div class="authenticationInfo ">
							<p class="title">公司信息</p>
							<div class="am-form-group">
								<label for="user-name" class="am-form-label">公司名称</label>
								<div class="am-form-content">
									<input type="text" id="user-name" placeholder="请输入您的公司名称" name = "name_company" disabled>
								</div>
							</div>
							<div class="am-form-group">
								<label for="user-IDcard" class="am-form-label">注册号</label>
								<div class="am-form-content">
									<input type="text" id="user-IDcard" placeholder="请输入您的公司注册号" name="id_reg"  disabled />
								</div>
							</div>
							<p class="title">上传营业执照</p>
						</div>
						</div>
						<!--商家信息资料结束-->

                         <!--执行图片下载图片插件开始-->
							<div class="authenticationPic ">
								<ul class="cardlist">
									<li>
										<div class="cardPic">
											<div class="col-sm-9 big-photo">
												<div id="preview">
													<img id="imghead" border="0" src="/static/index/business/images/photo_icon.png" width="210" height="140.66" onclick="$('#previewImg').click();">
												</div>
												<input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="image">
											</div>
										</div>
									</li>
								</ul>
							</div>
							<!--执行图片下载图片插件开始-->

						<div class="info-btn">
							<button class="am-btn am-btn-danger hehe">提交</button>
						</div>
						</form>
					</div>
				</div>
			</div>



	   <script>
            $(function(){
                //点击切换 个人用户和商家信息


                $('.personradio').click(function(){
                    $('.businessinformation').css('display','none').find('input').attr('disabled',true);
                    $('.personinformation').css('display','block');

                });

                $('.businessradio').click(function(){
                    $('.businessinformation').css('display','block').find('input').attr('disabled',false);
                    $('.personinformation').css('display','none');

                });


        //    查看商户是否注册 用ajax 返回验证
                $('#linkname').blur(function(){
                   var link_name = $('#linkname').val();
                   console.log(link_name);
                    $.ajax({
                        type : 'post',
                        url : '/business/linkname',
                        data : {"link_name":link_name},
                        success:function(data){
                            if(data){
                                $('.content').html('不好意思，该联系人已经认证过').css('color','red');
                                $('.hehe').attr('disabled',true);


                            }
                        },
                        error : function(){
                            alert('ajax请求失败');
                        }
                    })
                })

				$('#linkname').focus(function(){
                    $('.content').html('');
                    $('.hehe').removeAttr('disabled');
				})

			});
	   </script>
{/block}
